<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:constants="http://www.tuanzi.com/constants/tags"
                xmlns:security="http://www.springframework.org/security/tags"
                template="/templates/template.xhtml">
    <ui:define name="title">编辑首页模板信息</ui:define>
    <ui:define name="content">
        <h:form id="templateInfoForm" enctype="multipart/form-data">
            <div class="topbar clearfix"
                 style="background: -webkit-linear-gradient(top,#f6f7f9 0,#ebedf0 100%);">
                <p:toolbar>
                    <f:facet name="right">
                        <p:commandButton value="复制" icon="fa fa-copy"
                                         actionListener="#{loanPageTemplateInfoBean.onCopyPageTemplate()}"
                                         process="@this"
                                         update="@form"
                                         rendered="#{loanPageTemplateInfoBean.isView()}"/>
                        <p:commandButton value="编辑" icon="fa fa-edit"
                                         actionListener="#{loanPageTemplateInfoBean.changeStatusToEdit}"
                                         process="@this"
                                         update="@form" rendered="#{loanPageTemplateInfoBean.isView()}"/>
                        <p:commandButton value="保存" icon="fa fa-save"
                                         actionListener="#{loanPageTemplateInfoBean.onSave()}"
                                         update="@form"
                                         rendered="#{loanPageTemplateInfoBean.isAdd() || loanPageTemplateInfoBean.isEdit()}"/>
                        <p:button value="返回" icon="fa fa-reply-all" href="#{currentUserBean.back}"/>
                    </f:facet>
                </p:toolbar>
            </div>

            <div class="ui-g ui-fluid" style="padding-top: 30px;">
                <div class="ui-g-12 ">

                    <div class="ui-g-12 card">
                        <p style="font-weight: 900;font-size: 15px">对应模块样式预览，预览链接（点击查看）：<a target="_blank" href="http://company.yingzhongshare.com:8090/confluence/x/QwUSAQ">http://company.yingzhongshare.com:8090/confluence/x/QwUSAQ</a></p>
                        <h1>首页模板设置</h1>
                        <p:panelGrid style="border:0px none; background-color:transparent;">

                            <div class="ui-g-12" style="padding-left: 0">
                                <div class="ui-g-2">
                                    <p:outputLabel value="设置模板名称"><strong style="color: red">*</strong></p:outputLabel>
                                </div>
                                <div class="ui-g-4">
                                    <p:inputText id="name" value="#{loanPageTemplateInfoBean.$.name}"
                                                 disabled="#{loanPageTemplateInfoBean.isView()}"/>
                                </div>
                            </div>

                            <div class="ui-g-12">
                                <p style="padding: 0"><strong>选择适用产品：</strong></p>
                            </div>
                            <p:tooltip for="rule117"
                                       value="替补模板只能配置一个"
                                       position="top"/>
                            <div class="ui-g-2"><h:outputText id="rule117" value="是否是替补"/></div>
                            <div class="ui-g-4">

                                <p:inputSwitch onLabel="是"
                                               offLabel="否"
                                               value="${loanPageTemplateInfoBean.$.substitute}"
                                               disabled="#{loanPageTemplateInfoBean.isView()}">
                                    <p:ajax event="change" process="@this" update="productPanel"/>
                                </p:inputSwitch>
                            </div>
                            <p:outputPanel id="productPanel" class="ui-g-12" style="padding-left: 0">
                                <p:outputPanel class="ui-g-12" rendered="#{loanPageTemplateInfoBean.$.substitute == false}" style="padding-left: 0">
                                    <div class="ui-g-2">
                                        <p:outputLabel for="parentProd" value="选择大产品"/>
                                        <strong style="color: red">*</strong>
                                    </div>
                                    <div class="ui-g-2">
                                        <p:selectOneMenu id="parentProd"
                                                         value="#{loanPageTemplateInfoBean.$.parentId}" filter="true"
                                                         filterMatchMode="contains" disabled="#{loanPageTemplateInfoBean.isView()}">
                                            <f:selectItem itemLabel="- 请选择 -" itemValue=""
                                                          noSelectionOption="true"/>
                                            <f:selectItems value="#{loanPageTemplateInfoBean.dictionaries[DictionaryCode.LARGE_COMMON_PRODUCT]}"
                                                           var="dic"
                                                           itemLabel="#{dic.name}" itemValue="#{dic.value1}"/>
                                            <p:ajax event="change" process="@this" update="prd,parentProdPanle" listener="#{loanPageTemplateInfoBean.onSelectParentProd}"/>
                                        </p:selectOneMenu>
                                    </div>
                                    <p:outputPanel id="parentProdPanle" class="ui-g-12" style="padding-left: 0">
                                        <p:outputPanel class="ui-g-12" rendered="#{loanPageTemplateInfoBean.$.parentId != null and loanPageTemplateInfoBean.$.parentId != ''}" style="padding-left: 0">
                                            <h3>
                                                <p:outputLabel value="#{loanPageTemplateInfoBean.parentProdName}"></p:outputLabel>
                                                <p:commandButton value="全选" style="margin-left: 20px"
                                                                 actionListener="#{loanPageTemplateInfoBean.onSelectAllProduct()}"
                                                                 update="prd" process="@this" disabled="#{loanPageTemplateInfoBean.isView()}"/>
                                            </h3>
                                            <p:selectManyButton id="prd" disabled="#{loanPageTemplateInfoBean.isView() }"
                                                                value="#{loanPageTemplateInfoBean.$.selectedOnlineProducts}">
                                                <f:selectItems
                                                        value="#{loanPageTemplateInfoBean.products}" itemDisabled="#{product.hadSet}"
                                                        var="product"
                                                        itemLabel="#{product.name}(#{product.productId})" itemValue="#{product.productId}"/>
                                            </p:selectManyButton>
                                        </p:outputPanel>
                                    </p:outputPanel>
                                </p:outputPanel>
                            </p:outputPanel>
                        </p:panelGrid>
                    </div>

                    <div class="ui-g-12 card">
                        <h1>通用模板配置</h1>
                        <div style="width: 100%" class="ui-g-10">
                            <p:outputPanel id="dynaPanel" class="ui-g-10">
                                <ui:repeat value="#{loanPageTemplateInfoBean.$.gloablModuleItems}" var="model" varStatus="status">
                                    <h:panelGroup style="width: 100%;float: right;" class="ui-g-10">
                                        <div class="ui-g-2">
                                            <p:commandButton style="width: 50px;margin-right: 10px;background-color: red;border: white" icon="fa fa-times"
                                                             actionListener="#{loanPageTemplateInfoBean.onDeleteModule(status.index)}"
                                                             update=":templateInfoForm:dynaPanel">
                                            </p:commandButton>
                                            模块顺序<p:outputLabel value="#{status.index+1}"/>
                                        </div>
                                        <div class="ui-g-6" style="padding-top: 2px">
                                            <div class="ui-g-3">
                                                <p:outputLabel value="展示模块"><strong style="color: red">*</strong></p:outputLabel>
                                            </div>
                                            <div class="ui-g-9">
                                                <p:selectOneMenu id="moduleId" value="#{model.moduleId}" disabled="#{loanPageTemplateInfoBean.isView()}">
                                                    <f:selectItem itemLabel="- 请选择 -" itemValue=""
                                                                  noSelectionOption="true"/>
                                                    <f:selectItems value="#{loanPageTemplateInfoBean.dictionaries[DictionaryCode.PAGE_TEMPLATE_MODULE]}"
                                                                   var="dic"
                                                                   itemLabel="#{dic.name}" itemValue="#{dic.value1}"/>
                                                </p:selectOneMenu>
                                            </div>

                                            <div class="ui-g-3">
                                                <p:outputLabel value="是否带标题"><strong style="color: red">*</strong></p:outputLabel>
                                            </div>
                                            <div class="ui-g-9">
                                                <p:selectOneMenu id="showTitle" value="#{model.showTitle}" disabled="#{loanPageTemplateInfoBean.isView()}">
                                                    <p:ajax event="change" process="@this" update="title"/>
                                                    <f:selectItem itemLabel="否" itemValue="0"/>
                                                    <f:selectItem itemLabel="是" itemValue="1"/>
                                                </p:selectOneMenu>
                                            </div>

                                            <h:panelGroup id="title">
                                                <div class="ui-g-3">
                                                    <p:outputLabel value="标题名称" rendered="#{model.showTitle == 1}"><strong style="color: red">*</strong></p:outputLabel>
                                                </div>
                                                <div class="ui-g-9">
                                                    <p:inputText value="#{model.title}" disabled="#{loanPageTemplateInfoBean.isView()}" rendered="#{model.showTitle == 1}"/>
                                                </div>
                                            </h:panelGroup>
                                        </div>
                                    </h:panelGroup>
                                </ui:repeat>
                            </p:outputPanel>
                        </div>
                        <div class="ui-g-12">
                            <p:commandButton icon="fa fa-plus" value="新增模块" actionListener="#{loanPageTemplateInfoBean.onAddModule}"
                                             update="dynaPanel"
                                             disabled="#{loanPageTemplateInfoBean.isView()}" style="width: 130px">
                            </p:commandButton>
                            <span style="color: gray">（最少需选择三个模块）</span>
                        </div>
                    </div>

                    <div class="ui-g-12 card">
                        <h1>对应用户模板配置</h1>
                        <div class="ui-g-3">
                            <p:outputLabel for="userType" value="选择页面模板需要针对展示的用户群："></p:outputLabel>
                            <h5 style="color: gray">（选择后则需单独为该用户配置新模板）</h5>
                        </div>
                        <div class="ui-g-4">
                            <p:selectOneMenu id="userType" disabled="#{loanPageTemplateInfoBean.isView()}"
                                             value="#{loanPageTemplateInfoBean.$.userType}">
                                <f:selectItem itemLabel="- 请选择 -" itemValue="" noSelectionOption="true"/>
                                <f:selectItems
                                        value="#{loanPageTemplateInfoBean.dictionaries[DictionaryCode.PAGE_TEMPLATE_USER_TYPE]}"
                                        var="dic"
                                        itemLabel="#{dic.name}" itemValue="#{dic.value1}"/>
                                <p:ajax event="change" process="@this" update="userPanel" listener="#{loanPageTemplateInfoBean.onSelectUserType}" />
                            </p:selectOneMenu>
                        </div>
                        <div style="width: 100%" class="ui-g-10">
                            <p:outputPanel id="userPanel">
                                <p:outputPanel class="ui-g-10" rendered="#{loanPageTemplateInfoBean.$.userType != null}">
                                    <p:outputLabel value="#{loanPageTemplateInfoBean.userTypeName}" style="font-weight: 900;font-size: 20px"></p:outputLabel>
                                    <hr/>
                                    <ui:repeat value="#{loanPageTemplateInfoBean.$.showUserModuleItems}" var="model" varStatus="status">
                                        <h:panelGroup style="width: 100%;float: right;" class="ui-g-8">
                                            <div class="ui-g-2">
                                                <p:commandButton style="width: 50px;margin-right: 10px;background-color: red;border: white" icon="fa fa-times"
                                                                 actionListener="#{loanPageTemplateInfoBean.onDeleteUserModule(status.index)}"
                                                                 update=":templateInfoForm:userPanel">
                                                </p:commandButton>
                                                模块顺序<p:outputLabel value="#{status.index+1}"/>
                                            </div>
                                            <div class="ui-g-6" style="padding-top: 2px">
                                                <div class="ui-g-3">
                                                    <p:outputLabel value="展示模块"><strong style="color: red">*</strong></p:outputLabel>
                                                </div>
                                                <div class="ui-g-9">
                                                    <p:selectOneMenu id="userModuleId" value="#{model.moduleId}" disabled="#{loanPageTemplateInfoBean.isView()}">
                                                        <f:selectItem itemLabel="- 请选择 -" itemValue=""
                                                                      noSelectionOption="true"/>
                                                        <f:selectItems value="#{loanPageTemplateInfoBean.dictionaries[DictionaryCode.PAGE_TEMPLATE_MODULE]}"
                                                                       var="dic"
                                                                       itemLabel="#{dic.name}" itemValue="#{dic.value1}"/>
                                                    </p:selectOneMenu>
                                                </div>

                                                <div class="ui-g-3">
                                                    <p:outputLabel value="是否带标题"><strong style="color: red">*</strong></p:outputLabel>
                                                </div>
                                                <div class="ui-g-9">
                                                    <p:selectOneMenu id="userModuleShowTitle" value="#{model.showTitle}" disabled="#{loanPageTemplateInfoBean.isView()}">
                                                        <p:ajax event="change" process="@this" update="userModuleTitle"/>
                                                        <f:selectItem itemLabel="否" itemValue="0"/>
                                                        <f:selectItem itemLabel="是" itemValue="1"/>
                                                    </p:selectOneMenu>
                                                </div>

                                                <h:panelGroup id="userModuleTitle">
                                                    <div class="ui-g-3">
                                                        <p:outputLabel value="标题名称" rendered="#{model.showTitle == 1}"><strong style="color: red">*</strong></p:outputLabel>
                                                    </div>
                                                    <div class="ui-g-9">
                                                        <p:inputText value="#{model.title}" disabled="#{loanPageTemplateInfoBean.isView()}" rendered="#{model.showTitle == 1}"/>
                                                    </div>
                                                </h:panelGroup>
                                            </div>
                                        </h:panelGroup>
                                    </ui:repeat>
                                    <div class="ui-g-12">
                                        <p:commandButton icon="fa fa-plus" value="新增模块" actionListener="#{loanPageTemplateInfoBean.onAddUserModule}"
                                                         update="userPanel"
                                                         disabled="#{loanPageTemplateInfoBean.isView()}" style="width: 130px">
                                        </p:commandButton>
                                        <span style="color: gray">（最少需选择三个模块）</span>
                                    </div>
                                </p:outputPanel>
                            </p:outputPanel>
                        </div>
                    </div>
                </div>
            </div>
        </h:form>
    </ui:define>
</ui:composition>